<template>
	<view class="travel-records">
		<view class="travel-category-list flex--row text--secondary-dark--heavy">
			<view class="travel-category" :class="{'active':travelStatus === 1}" @click="changeTravelStatus(1)">
				已出行
			</view>
			<view class="travel-category" :class="{'active':travelStatus === 2}" @click="changeTravelStatus(2)">
				未出行
			</view>
			<view class="travel-category" :class="{'active':travelStatus === 3}" @click="changeTravelStatus(3)">
				已取消
			</view>
		</view>
		
		<view class="travel-record-list flex--col">
			<Loading v-if="loading">正在加载中</Loading>
			<template v-else>
				<EmptyWarn v-if="travels[travelStatus-1].length === 0">没有此状态的出行</EmptyWarn>
				<RecordItem v-for="(travel,index) in travels[travelStatus-1]" :key="index" :travel="travel"></RecordItem>
			</template>
			
		</view>
	</view>
</template>

<script>
	import EmptyWarn from "@/components/EmptyWarn/EmptyWarn.vue"
	import Loading from "@/components/Loading/Loading.vue"
	import * as UserApi from "@/api/user/user.js"
	import RecordItem from "./components/RecordItem.vue"
	export default {
		components:{
			RecordItem,
			Loading,
			EmptyWarn
		},
		data() {
			return {
				loading:true,
				travelStatus:1,
				travels:[[],[],[]]
			}
		},
		methods: {
			changeTravelStatus(travelStatus){
				this.travelStatus = travelStatus
				if(this.travels[this.travelStatus - 1].length > 0){
					return
				}
				this.getTravelList()
			},
			async getTravelList(){
				this.loading = true 
				const params = {
					travelStatus:this.travelStatus
				}
				this.travels[this.travelStatus - 1] = await UserApi.travelList(params)
				this.loading = false
			}
		},
		async onPullDownRefresh(){
			await this.getTravelList()
			uni.stopPullDownRefresh()
		},
		async onLoad(){
			this.getTravelList()
		}
	}
</script>

<style lang="scss">
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark--heavy{
		font-size: 18px;
		font-weight: 700;
		color:#333;
	}
	.text--secondary-dark{
		font-size: 18px;
		font-weight: 500;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 14px;
		color:#666;
	}
	
	
	page{
		width:100%;
		height:100%;
		background-color: #FFFFFF;
	}
	.travel-records{
		padding:12px 0px;
		margin:auto;
		width:600rpx;
	
	}
	.travel-category-list{
		@include border-three-roundings;
		padding:16px;
		justify-content: space-between;
		
		.travel-category{
			position:relative;
		}
		
		.travel-category.active::after{
			position:absolute;
			left:0;
			bottom:-50%;
			border-radius: 10px;
			content:'';
			width:100%;
			height:8px;
			background-color: $main-color;
		}
	}	
	
	.travel-record-list{
		padding:24px 0px;
		gap:24px;
	}

</style>
